<template>
  <div class="details">
    <layoutPage v-if="!auditShow">
      <template #search>
        <el-descriptions class="basic-info">
          <template #title>
            <div class="title">
              <el-tag :type="status.colorType" size="small" effect="dark">
                {{ status.label }}
              </el-tag>
              <span>【ID:{{ basicInfo?.id || route.query?.id }}】</span>
              <span>{{ basicInfo.name }}</span>
            </div>
          </template>
          <el-descriptions-item label="提出单位：">
            {{ basicInfo.deptName }}
          </el-descriptions-item>
          <el-descriptions-item label="提出人：">
            {{ basicInfo.creatorName }}
          </el-descriptions-item>
          <el-descriptions-item label="发布时间：">
            {{ updateTime(basicInfo.createTime, 'YYYY-MM-DD HH:mm:ss') }}
          </el-descriptions-item>
        </el-descriptions>
      </template>
      <template #default>
        <el-tabs v-model="tabActive">
          <el-tab-pane
            v-for="item in tabList"
            :key="item.name"
            :label="item.label"
            :name="item.name"
          >
            <component
              :is="tabComponents[item.name]"
              v-if="tabActive == item.name"
              :details-info="basicInfo"
            />
          </el-tab-pane>
        </el-tabs>
      </template>
    </layoutPage>
    <div v-else>
      <el-tabs v-model="tabActive">
        <el-tab-pane
          v-for="item in tabList"
          :key="item.name"
          :label="item.label"
          :name="item.name"
        >
          <component
            :is="tabComponents[item.name]"
            v-if="tabActive == item.name"
            :details-info="basicInfo"
          />
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import layoutPage from '@/components/layoutPage.vue'
  import { useTimeFormat } from '@/utils/useTimeFormat'
  import {
    detailsInfoProps,
    resDetailsProps,
    componentProps,
  } from '../interface'
  import { getPromblemDetails } from '@/api/project/researchProblems'
  import { useDictStore } from '@/store/modules/dict'

  const _discStore = useDictStore()
  const { updateTime } = useTimeFormat()

  const route = useRoute()

  // 基础信息
  const basicInfo = reactive<Partial<detailsInfoProps>>({})

  // 状态属性
  const status: any = computed(
    () =>
      _discStore.getDictForValue('audit_status', basicInfo.status) || {
        colorType: 'info',
        label: '未开启',
      }
  )

  const tabActive = ref<string>('problemContent')

  const tabList = [
    { label: '难题内容', name: 'problemContent' },
    { label: '相关审核', name: 'process' },
  ]

  const tabComponents = {
    problemContent: defineAsyncComponent(
      () => import('./components/problemContent.vue')
    ),
    process: defineAsyncComponent(() => import('./components/process.vue')),
  }

  // 计算属性过滤掉需要隐藏的 tab 草稿类型进入的时候隐藏掉审核tab
  // const filteredTabList = computed(() => {
  //   return tabList.filter(
  //     (item) =>
  //       !(item.name === 'process' && props?.componentData?.type === 'drafts')
  //   )
  // })

  // 查询明细
  const handleSearchDetails = async (id: string, getType: number) => {
    try {
      const res: resDetailsProps = await getPromblemDetails({
        id,
        getType,
      })
      if (res && res.data) {
        Object.assign(basicInfo, res.data)
      } else {
        Object.assign(basicInfo, {})
      }
    } catch (e) {
      console.error('查询难题明细异常', e)
      Object.assign(basicInfo, {})
    }
  }

  // 是否由审核界面进入
  const auditShow = computed(() => route.query?.auditId)
  watch(
    () => ({
      id: route.query?.id,
    }),
    ({ id }: { id: string }) => {
      if (id) {
        handleSearchDetails(id, 2)
      }
    },
    { immediate: true, deep: true }
  )
</script>

<style lang="scss" scoped>
  .details {
    :deep(.el-tabs__content) {
      overflow: inherit;
    }
    :deep(.el-tabs__header) {
      margin: 0 0 20px;
    }
    :deep(.basic-info) {
      .title {
        display: inline-flex;
        align-items: center;
        font-size: 18px;
      }
      .el-descriptions__label {
        margin-right: 0px !important;
      }
      .el-descriptions__title {
        padding-left: 0px;
        border: none;
      }
    }
  }
</style>
